<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏滑动事件</title>
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}

	
	.static{
		height: 300px;
		background: pink;
		text-align: center;
	}

	.fixed{
		height: 100px;
		width: 100%;
		background: red;
		text-align: center;
		position: fixed;
		top: -150px;
		transition: all .3s ease-in-out;


/* 
	transition: all .3s linear; 线性
	transition: all .3s ease;   慢--快--慢
	transition: all .3s ease-in;   慢速进入--0.4=>0=>1
	transition: all .3s ease-out;   慢速结束--0 =》 0.5 =》 1
	transition: all .3s ease-in-out;   慢速开始结束  0.42 => 0 => 0.58 =。 1
	transition: all .3s cubic-bezier(1,0.5,0,1);   慢速开始结束  0.42 => 0 => 0.58 =。 1

	 */
	}

	.fixed.active{
		top:0px;
		z-index: 1;
	}


	.div3{
		height: 300px;
		background: yellow;
		text-align: center;
	}



</style>
</head>
<body>

	<div class="fixed">2号导航栏--fixed固定</div>
	<div class="static">1号导航栏--static静止</div>
	<div class="div3">3号导航栏</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><hr>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>


	
	





<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">

	var static = document.getElementsByClassName('static')
	var fixed = document.getElementsByClassName('fixed')
	var div3 = document.getElementsByClassName('div3')

	var show = function(){
		$(".fixed").addClass("active")
	}

	var hide = function(){
		$(".fixed").removeClass("active")
	}


//当滑动多少像素时导航栏下滑出现及隐藏
	window.addEventListener("scroll",function(){
		
		if(window.scrollY>=300){
			show()
		}else{
			hide()
		}
	})

//自动滑动
/*	var positionY = 0;
	var timer = window.setInterval(function(){

		var	positionY = positionY +1
		if(positionY<=300){
			window.scrollTo(0,positionY)
		}else{
			clearInterval(timer)
		}

	})
*/
	

var positionY=0;
var timer=window.setInterval(function(){
	
	positionY+=1;
	if(positionY<=300){
		window.scrollTo(0,positionY);//当positionY的距离小于这个值时它就自增1，滑动是从0 到 这个值
	}else{
		clearInterval(timer);
	}
})



</script>
	
</body>
</html>